import React, { useState } from 'react'
import { Input, Button, Form, Toast } from 'antd-mobile'
import './index.css'
import axios from 'axios'
export default function Zhuce() {
    let [phone, setphone] = useState('')
    let zhuce = () => {
        axios.post('http://localhost:3000/yzk/zhuce', { phone }).then(res => {
            if (res.data.code === 200) {
                Toast.show({
                    icon: 'success',
                    content: '保存成功',
                })
            }else{
                Toast.show({
                    icon: 'fail',
                    content: '手机号已存在',
                  })
            }
        })
    }
    return (
        <div className='zhuce'>
            <div className='box1'>
                <h3>注册页面</h3>
                <Form layout='horizontal'>
                    <Form.Item label='用户名' name='username'>
                        <Input placeholder='请输入用户名' value={phone} clearable onChange={(e) => {
                            setphone(e)
                        }} />
                    </Form.Item>
                </Form>
                <Button color='primary' fill='none' onClick={() => {
                    zhuce()
                }}>
                    注册
                </Button>
            </div>
        </div>
    )
}
